import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../../store'
import { useEffect } from 'react'
import IconFont from '@/components/IconFont'
import { resumeTypeMap } from '@/const'
import { formateMoney } from '@/utils'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { getUserInfo, userInfo, jobList, getUserJobRel } = store

    /** 制作简历 */
    const viewResume = (bizCode: string, file: any) => {
        const { fileUrl } = file
        const { platform_access_token, mid_domain, open_key } = userInfo || {}
        let callbackUrl = encodeURIComponent(window.location.origin + `/#/archives/resume/choose`)
        window.location.href = `${mid_domain}/job-center/my-resume/resume-preview?token=${platform_access_token}&callback=${callbackUrl}&bizCode=${bizCode}&pdfUrl=${fileUrl}&hiddenBtn=1&openKey=`
    }

    useEffect(() => {
        document.title = '我的简历'
        getUserInfo()
        getUserJobRel()
    }, [])

    return (
        <div className={styles.container}>
            <div className={styles.resume_wrapper}>
                <div className={styles.resume_list}>
                    {jobList.map((item: any) => {
                        return (
                            <div key={item.code} className={styles.resume_item}>
                                <div className={styles.resume_title}>
                                    <span>{item.capacityName}</span>
                                    {item.fileUrl && (
                                        <span className={styles.resume_make} onClick={() => viewResume(item.code, item)}>
                                            查看 <IconFont type="icon-zuojiantou" />
                                        </span>
                                    )}
                                </div>
                                <div className={styles.resume_row}>
                                    {resumeTypeMap.get(Number(item.type))}
                                    {Number(item.type) !== 2 && (
                                        <>
                                            <span className={styles.line} />
                                            {formateMoney(item.minSalary)} ~ {formateMoney(item.maxSalary)}
                                        </>
                                    )}
                                </div>
                                <div className={styles.resume_row}>
                                    {item.cityName}
                                    <span className={styles.line} />
                                    {item.industryName}
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
})
